<template>
  <view class="search-history-container">
    <!-- 标题 -->
    <view class="search-history-title-box">
      <view class="search-history-title">搜索历史</view>
      <view class="search-history-icon" v-if="isShowTrashIcon">
        <uni-icons type="trash" size="20" @click="onClickTrashIcon" />
      </view>
      <view class="search-history-word" v-else>
        <view class="search-history-word-p" @click="deleteAll">全部删除</view>
        <view class="search-history-word-p" @click="isShowTrashIcon = true"
          >完成</view
        >
      </view>
    </view>
    <!-- 列表 -->
    <view class="list-box">
      <block v-for="(item, index) in searchHistoryData" :key="index">
        <view class="list-container"  @click="onDeleteItem(item)">
          <view class="list-text line-clamp-1">{{ item }}</view>
          <uni-icons
            v-if="!isShowTrashIcon"
            class="list-icon"
            type="clear"
            size="24"
           
          />
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'

export default {
  name: "search-history",
  
  data() {
    return {
      isShowTrashIcon: true,
      historyResult:[]
    };
  },
  
  computed:{
    ...mapState('search',['searchHistoryData'])
  },
  methods: {
    ...mapMutations('search',['onDeleteSearchItem','onDeleteAll']),
    onClickTrashIcon() {
      this.isShowTrashIcon = false;
    },
    onDeleteItem(item){
      if(!this.isShowTrashIcon){
        this.onDeleteSearchItem(item)
      }else{
        this.$emit('onResearch',item)
      }
    },
    deleteAll(){
      uni.showModal({
        title: '提示',
        content: '是否删除所有数据',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm){
            this.onDeleteAll()
          }
          if(cancel){
            uni.showToast({title:'你是狗'})
          }
          this.isShowTrashIcon = true
        }
      })
    }
    
  },
};
</script>

<style lang="scss">
.search-history-container {
  padding: $uni-spacing-lg $uni-spacing-base;
  .search-history-title-box {
    display: flex;
    justify-content: space-between;
    .search-history-title {
      font-size: 14px;
    }
    .search-history-icon {
    }
    .search-history-word {
      display: flex;
      justify-content: right;
      .search-history-word-p {
        margin-left: 5px;
        font-size: 12px;
        color: $uni-info;
      }
    }
  }
  .list-box {
    .list-container {
      width: 49%;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      padding: 5px 0px 5px 0px;
      .list-text{
        width: 85%;
        display: inline-block;
        color: $uni-base-color;
        font-size: 14px
      }

    }
    .list-container:nth-child(2n+1):before {
      content: " ";
      border-left: 1px solid grey;
      position: absolute;
      height: 10px;
      display: inline-block;
      top: 50%;
      right: 2px;
      transform: translateY(-50%);
      // padding: 10px;
      // margin-right: 10px;
    }
  }
}
</style>
